<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8"/>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap-buttons/css/buttons.css"/>
    <link rel="stylesheet" type="text/css" href="css/chat.css"/>

    <script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-buttons/js/buttons.js"></script>

    <script type="text/javascript" src="js/jtemplates/jquery-jtemplates.js"></script>

    <script type="text/javascript" src="js/chat.js"></script>

    <script type="text/javascript">
        $(function () {
            var topics = $("#topics");
            topics.setTemplate($("#chatRoomTemplate").html());
            topics.processTemplate(chatRooms);


            $('#saveBtn').click(function () {
                var chatName = $("#chatName").val();
                $.cookie(CHAT_NAME_KEY, chatName);
                closeChatNameDialog();
                location.href = "chat.html";
            });

            $('#cancelBtn').click(function () {
                closeChatNameDialog();
                location.href = "chat.html";
            });
        });
    </script>

    <title>来和我们一起聊天吧</title>
</head>
<body>
<div id="topics"></div>

<div id="chatRoomTemplate" style="display: none">
    {#foreach $T as room}
            <span class="button-wrap">
        <a href="javascript:goToChat('{$T.room.name}')" class="button button-circle button-highlight">{$T.room.label}</a>
    </span>
    {#/for}
</div>

<div id="chatNameDialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">给自己取个闪闪发光的名字吧
                    <small>(没有名字系统会自动为你分配一个编号的)</small>
                </h4>
            </div>
            <div class="modal-body">
                <table>
                    <tr>
                        <td><label for="chatName">姓名：</label></td>
                        <td><input id="chatName" class="form-control input-lg" type="text" name="chatName"
                                   maxlength="8"/></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button id="saveBtn" type="button" class="btn btn-primary">保存</button>
                <button id="cancelBtn" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>